<script setup>

import {onMounted, ref} from "vue";
import CommentItem from "@/components/post/CommentItem.vue";
import CommentSubmit from "@/components/post/CommentSubmit.vue";
import {getArticleCommentList} from "@/api/comment.js";
import {useRouter} from "vue-router";

const $router = useRouter();


const commentList = ref([]);

const refreshCommentList = async () => {
  // console.log('刷新评论列表')
  // 获取动态路由参数
  const {id} = $router.currentRoute.value.params;
  console.log('当前文章ID=', id)
  if (!id) return;
  loading.value = true;
  await getArticleCommentList(id).then(res => {
    commentList.value = res.data || [];
    show.value = true;
    const timer = setTimeout(() => {
      loading.value = false;
      clearTimeout(timer);
    }, 500);
  }).catch(err => {
    console.log(err);
    loading.value = false;
  });
};
onMounted(async () => {
  await refreshCommentList();
});

const loading = ref(false);
const show = ref(false);
</script>

<template>
  <div class="v-comment-container" v-if="show">
    <comment-submit @submit="refreshCommentList" :key="Math.random()"/>
    <div class="v-comment-list" v-loading="loading">
      <comment-item v-for="item in commentList" :comment="item" @refresh="refreshCommentList" :key="item"/>
    </div>
  </div>
</template>

<style scoped>
.v-comment-container {
  background-color: #ffffff;
  margin: 10px 0;
  //padding: 10px;
  box-sizing: border-box;
}

.v-comment-box {
  background-color: #ffffff;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  
  > div {
    padding: 10px 0;
  }
  
  > div:nth-child(2) {
    display: flex;
    justify-content: space-between;
    gap: 20px;
  }
}

/* 重写 element plus 样式 */
:deep(.el-textarea__inner) {
  resize: none;
}
</style>